<template>
  <a-modal
    :title="'修改申请:'+customName"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="formLoading">
      <x-card>
        <div slot="content" class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-form-item
              label="下一步审核人员"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-col :md="18" :sm="18">
                <a-input :disabled="true" placeholder="下一步审核人员" v-model="nextMakerName" />
              </a-col>
            </a-form-item>
          </a-form>
        </div>
      </x-card> 
      <a-tabs :default-active-key="defaultActive" @change="callback">
          <a-tab-pane key="1" tab="表单信息" :force-Render="true">
            <a-form :form="form">
              <a-form-item v-show="webId == 'kfp'" v-if="frmType == 0">
                <k-form-build :value="jsonData" ref='kfp'/>
              </a-form-item>
              <a-form-item v-show="webId == 'flcCustomForm'" v-else >
                <flc-custom-form :value="jsonData" ref="flcCustomForm" />
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="流程信息" :force-Render="true">
            <a-card :bordered="false">
              <vfd ref="vfd" style="background-color: white;" :needShow="false" :activityId="activityId" :fieldNames="fieldNames"></vfd>
            </a-card>
          </a-tab-pane>
      </a-tabs>
    </a-spin>
    <user-list-form ref="userListForm" @ok="handleOk"/>
    <role-list-form ref="roleListForm" @ok="handleOk"/>
  </a-modal>
</template>

<script>
  import { vfd } from '@/components'
  import 'k-form-design/styles/k-form-design.less'
  import flcCustomForm from '@/views/flowCenter/custom/flcCustomForm'
  import userListForm from '@/views/system/user/userListForm'
  import roleListForm from '@/views/system/role/roleListForm'
  import { flowinstanceEdit,getFlowinstance } from '@/api/modular/flowCenter/flowinstanceManage'
  export default {
    components: {
      flcCustomForm,
      vfd,
      userListForm,
      roleListForm
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        defaultActive:1,
        visible: false,
        confirmLoading: false,
        formLoading: true,
        jsonData:{},
        frmData:{},
        frmType:0,
        fieldNames:[],
        nextNodeDesignates:[],
        nextMakerName:'',
        webId:null,
        nextNodeDesignateType:null,
        customName:null,
        schemeContent:null,
        schemeId:null,
        frmId:null,
        id:null,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法 
      edit (record) {
        this.customName = record.customName
        this.frmType = record.frmType
        this.schemeContent=record.schemeContent
        const queryParam={};
        queryParam.id=record.id
        this.id=record.id
        this.frmId = record.frmId
        this.schemeId = record.schemeId
        getFlowinstance(queryParam).then(res => {
          if (!res.success) {
            return
          }
          this.webId = record.webId
          if(record.frmType == 0)
          {
            this.webId='kfp'
          }
          record.nextNodeDesignateType = res.data.nextNodeDesignateType
          record.nextNodeDesignates = res.data.nextNodeDesignates
          record.NextMakerName = res.data.nextMakerName
          this.visible = true
          this.formLoading = false
          this.nextNodeDesignateType = record.nextNodeDesignateType
          switch(this.nextNodeDesignateType)
          {
              case "ALL_USER":
                this.nextMakerName="所有人"
                break
              case "RUNTIME_SPECIAL_USER":
                this.nextMakerName=""
                break
              case "RUNTIME_SPECIAL_ROLE":
                this.nextMakerName="" 
                break
              default:
                this.nextMakerName=record.nextMakerName
                break
          }
          this.jsonData = JSON.parse(record.frmContent);
          this.frmData = JSON.parse(record.frmData);
          setTimeout(() => {
            this.importData()
            this.fieldNames=JSON.parse(record.frmContentParse)     
          }, 100)
        })     
      },
      importData(){
        if(this.defaultActive == 2)
        {
          if(!!this.schemeContent)
          {
            if(!!this.$refs.vfd)
            {
              this.$refs.vfd.loadFlow(this.schemeContent)
            }
            else
            {
              setTimeout(() => {
                this.$refs.vfd.loadFlow(this.schemeContent);  
              }, 100)
            }
          }
          else{
            this.$refs.vfd.clear()
          }
        }
        else
        {
          if(!!this.$refs.vfd)
          {
            this.$refs.vfd.clear()
          }
          if (!!this.$refs.kfp)
          {
            this.$refs.kfp.setData(this.frmData);  
          }
          else
          {
            setTimeout(() => {
              this.$refs.kfp.setData(this.frmData);  
            }, 100)
          }
        }
      },
      callback(key)
      {
        this.defaultActive = key
        setTimeout(() => {
          this.importData()  
        }, 100)
      },
      getPreviewData(){
        // 使用getData函数获取数据
        const that = this
        const webId=that.webId
        that.$refs[webId].getData().then(values => {
          const frmData = JSON.stringify(values)
          const input = {}
          input.frmId = that.frmId
          input.schemeId = Number(that.schemeId)
          input.frmData = frmData
          input.id = that.id
          input.nextNodeDesignateType= that.nextNodeDesignateType
          input.nextNodeDesignates = that.nextNodeDesignates
          flowinstanceEdit(input).then((res) => {
            if (res.success) {
              this.$message.success('新增成功')
              this.jsonData=null
              this.visible = false
              this.$emit('ok', values)
              this.form.resetFields()
            } else {
              this.$message.error('新增失败：' + res.message)
            }
          })  
          if(!!that.$refs.vfd)
          {
            that.$refs.vfd.clear()
          }
        }).catch(() => {
          that.$message.error('验证未通过，获取失败') 
        })
      },
      setUser()
      {
        if(this.nextNodeDesignateType=="RUNTIME_SPECIAL_USER")
        {
            this.$refs.userListForm.userList();
        }  
        else if(this.nextNodeDesignateType=="RUNTIME_SPECIAL_ROLE")
        {
            this.$refs.roleListForm.roleList();
        }  
      },
      //确认回调
      handleOk(record) {
        const that = this;
				if(!!record)
				{
					const nodeDesignateData=[];
					const nodeDesignateName=[];
					record.forEach(item => {
						nodeDesignateData.push(item.id);
						nodeDesignateName.push(item.name);
					});

					if(nodeDesignateName.length>0)
					{
						that.nextMakerName = nodeDesignateName.join(',');
						that.nextNodeDesignates = nodeDesignateData;
					}
				}	
      },
      handleSubmit () {
        this.confirmLoading = true
        this.getPreviewData();
        this.confirmLoading = false
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        if(!!this.$refs.vfd)
        {
          this.$refs.vfd.clear()
        }
      }
    },
		watch: {
			kfp: {
				handler (val) {
					this.$refs.kfp.setData(this.frmData);
				},
				deep: true
			},
		}
  }
</script>
